// subPages/glucometer/details/details.js
import * as echarts from '../../../ec-canvas/echarts';
const app = getApp()
var util =  require('../../../utils/util.js');
var navListJson = require('../../../data/navListJson');
let Chart = null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
    currentTab: 0,//当前页面
    ec: {
      // lazyLoad: true // 延迟加载
    },
    item: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log(options.time)
    var that = this
    if(options.time != 'undefined')
    {
      if(options.item != 'undefined' && options.item != null){
        that.setData({
          item: JSON.parse(options.item)
        })
        wx.setNavigationBarTitle({
          title: that.data.item.nickName + '的数据分析' //页面标题为路由参数
        })
      }
      that.getDetailsData(options.time)
      that.setData({
        time: util.setTime(options.time),
        navList: navListJson.detailsNavList
      })
    }
    that.barchartsComponnet = that.selectComponent('#mychart');
  },

  getDetailsData:function(time){
    var that = this
    var id = ''
    if(that.data.item != null){
      id = that.data.item.userId.userId
    }else{
      id = app.globalData.userId
    }
    wx.request({
      url: app.globalData.apiUrl +'/sugar',
      data: {
        userId: id,
        time: time
      },
      method: 'get',
      header: {
        'content-type': 'application/json' //默认值
      },
      success: function (res) {
        // console.log(res)
        if(res.data.code == '200'){
          that.detailDataList(res.data.data)
          
        }else{
          util.showModal('提示','数据异常')
          return;
        }
      },
      fail: function (res) {
        console.log("失败",res);
      }
    })
  },

  //处理数据
  detailDataList:function(detailsList){
    var that = this
    var arr = []
    for(var i in detailsList){
      detailsList[i].createtime = util.setTime3(detailsList[i].createtime)
      arr.push(detailsList[i].blood)
      if(detailsList[i].type == 1)
      {
        detailsList[i].type = '早餐前'
      }
      if(detailsList[i].type == 2)
      {
        detailsList[i].type = '早餐后'
      }
      if(detailsList[i].type == 3)
      {
        detailsList[i].type = '午餐前'
      }
      if(detailsList[i].type == 4)
      {
        detailsList[i].type = '午餐后'
      }
      if(detailsList[i].type == 5)
      {
        detailsList[i].type = '晚餐前'
      }
      if(detailsList[i].type == 6)
      {
        detailsList[i].type = '晚餐后'
      }
    }
    that.setData({
      detailsList: detailsList,
      arr: arr
    })
    that.getSwiperHeight()
    that.init_echarts();  //创建图表
  },

  //获取swiper高度
  getSwiperHeight:function(){
    var that = this
    let windowHeight,navHeight,timeHeight,tableHeight
    wx.getSystemInfo({
      success: (res) => {
        //创建节点选择器
        windowHeight = res.windowHeight
      },
    })
    var query = wx.createSelectorQuery();
    //选择id
    query.select('.navAre').boundingClientRect(function (rect) {
      navHeight = rect.height
    }).exec();
    query.select('.time').boundingClientRect(function (rect) {
      timeHeight = rect.height
    }).exec();
    query.select('.tableAre').boundingClientRect(function (rect) {
      tableHeight = rect.height
    }).exec();
    setTimeout(function(){
      // console.log(windowHeight)
      // console.log(navHeight)
      // console.log(tableHeight)
      // console.log(timeHeight)
      // console.log(tableHeight + timeHeight + 25)
      if((tableHeight + timeHeight + 25) > (windowHeight - navHeight - 40)){
        that.setData({
          swiperHeight:  (tableHeight + timeHeight + 25) + 'px'
        })
      }else{
        that.setData({
          swiperHeight: windowHeight - navHeight - 40 + 'px'
        })
      }
      // console.log(that.data.swiperHeight)
    },200)
    
    
  },

  //初始化图表
  init_echarts: function () {
    var that = this
    that.barchartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.showLoading({
        text : '正在努力的读取数据中...'
      });
      Chart.setOption(that.getOption()); //获取新数据
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },

  //设置图表
  getOption: function () {
    var that = this
    // 指定图表的配置项和数据
    var option = {
      title : {
        text: '',
        subtext: ''
      },
      grid:{ 
        x:25,
        y:45,
        x2:5,
        y2:100,
        borderWidth:0
      },
      xAxis: {
        type: 'category',
        data: ['早餐前', '早餐后', '午餐前', '午餐后', '晚餐前', '晚餐后'],
        nameLocation: 'middle',
        axisLine:{
          show:true,
          lineStyle:{
              color: '#979797',
              width:2,
              type: 'solid',
              opacity: 1
          }
        },
        axisTick:{
          show:false
        },
        axisLabel:{
          show: true,
          margin: 15,
          formatter:function(value){
            return value.split("").join("\n\n")
          }
        }
      },
      yAxis: {
        type: 'value',
        name: 'mmol/L',
        nameTextStyle: {
          color:'#545353'
        },
        axisLine:{
          show:true,
          lineStyle:{
              color: '#979797',
              width:2,
              type: 'solid',
              opacity: 1
          }
        },
        axisTick:{
          show:false
        },
        splitLine:{
          show:false
        },
        min: 0,
        max: 20
      },
      series : [{
        name:'',
        type:'line',
        smooth: true,
        symbol: "none",
        itemStyle : {
          normal: {
            color: '#5d6ed2'
          }
        },
        data: that.data.arr
        // data: ['3.9','5.0','12','8','7',]
      }]
    };
    Chart.hideLoading()
    return option;
    
  },

  //选择导航栏
  switchNav(event){
    var cur = event.currentTarget.dataset.current;
    if (this.data.currentTab == cur) {
        return false;
    } else {
        this.setData({
            currentTab: cur
        })
    }
    // this.setEchartsData(cur)
  },

  //内容滚动
  switchTab(event){
    var that = this
    var cur = event.detail.current;
    this.setData({
        currentTab: cur,
    });
  }, 

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})